<template>
  <div class="details" v-if="isShow">
    <div class="top-box">
      <swiper
        class="pic"
        :indicator-dots="true"
        :autoplay="true"
        :interval="4000"
        indicator-active-color="#1772ff"
        circular
      >
        <swiper-item class="banner" v-for="(item, index) in bannerList" :key="index">
          <img :src="item.url" class="img-size-100" />
          <text class="tips" v-if="pageData.promote_tag">{{
            pageData.promote_tag
          }}</text>
        </swiper-item>
      </swiper>
      <div class="name">{{ pageData.name }}</div>
      <div class="intro" v-if="pageData.introduction">
        {{ pageData.introduction }}
      </div>
      <div class="amount-box" v-if="pageData.amount_user < 10">
        <text class="icon">惠</text>
        <text class="txt">{{ pageData.amount_user }}折</text>
        <text class="tag" v-if="pageData.tag">{{ pageData.tag }}</text>
      </div>
      <div class="explain" v-if="pageData.explain">
        <text class="icon"></text>
        <text class="txt">{{ pageData.explain }}</text>
      </div>
      <div class="divider"></div>
      <div class="tips" v-if="pageData.bill.user">
        <div class="left-pic">
          <img :src="pageData.bill.user.avatar" class="img-size-100" />
        </div>
        <div class="txt">
          <text class="user-name"
            >{{ pageData.bill.user.nick_name
            }}{{ pageData.bill.show_time }}</text
          >消费返美粉币
          <text class="number">{{ pageData.bill.amount_user_name }}</text>
        </div>
      </div>
    </div>
    <div class="info-box">
      <div class="item time">
        <div class="left">
          <div class="icon"></div>
          <div class="txt">
            <text class="tips">营业中</text>|&nbsp;&nbsp;营业时间
            {{ pageData.business_hours }}
          </div>
        </div>
        <!-- <div class="right-icon"></div> -->
      </div>
      <div class="item address">
        <div class="left">
          <div class="icon"></div>
          <div class="txt">
            {{ pageData.address }}
          </div>
        </div>
        <div class="right" @click="openLocation">
          <text class="icon"></text>
          <text>导航</text>
        </div>
      </div>
      <div class="item tel">
        <div class="left">
          <div class="icon"></div>
          <div class="txt">
            <text class="tips">商家电话</text> {{ pageData.tel }}
          </div>
        </div>
        <div class="right" @click="makePhoneCall">
          <text class="icon"></text>
          <text>电话</text>
        </div>
      </div>
      <div class="item notice" v-if="pageData.notice">
        <div class="left">
          <div class="icon"></div>
          <div class="txt">
            <text class="tips">公告</text> |
            <text class="notice-txt">{{ pageData.notice }}</text>
          </div>
        </div>
      </div>
    </div>

    <div class="details-txt">
      <rich-text :nodes="pageData.content | replaceImg"></rich-text>
    </div>

    <div class="info-box">
      <div class="item recommend">
        <div class="left">
          <div class="icon"></div>
          <div class="txt">
            <text class="tips">推荐商品</text>
          </div>
        </div>
        <div class="right" @click="toLink('/shop/product/index?merchId='+id)">
          <text>查看更多</text>
          <text class="icon"></text>
        </div>
      </div>

      <div class="list-box">
        <a
            :url="'/shop/productDetails/productDetails?id=' + product.id"
            v-for="(product, index) in shopList"
            hover-class="none"
            :key="index"
        >
          <div class="item2">
            <div>
              <div class="pic-box">
                <img :src="product.cover_picture" class="img" />
                <text class="tips" v-if="product.promote_tag">{{
                    product.promote_tag
                  }}</text>
                <text class="inventory" v-if="product.is_sold_out === 1"
                >售罄
                  <!-- <text class="triangle-box"></text> -->
                </text>
              </div>
            </div>
            <div style="position: relative;width: 100%;">
              <div class="title">
                {{ product.title }}
              </div>
              <div class="tag">
                <div class="spike" v-if="product.special_tag">
                  {{ product.special_tag }}
                </div>
              </div>
              <div class="price-info">
                <div class="left">
                  <div class="present">
                    <text>美粉币</text>
                    <text class="number">{{
                        product.lowest_price_name
                      }}</text>
                  </div>
                  <div class="old" v-if="product.virtual_price">
                    {{ product.virtual_price }}
                  </div>
                </div>
                <!--                  <div class="right" v-if="product.virtual_sales">-->
                <!--                    销量 {{ product.virtual_sales }}-->
                <!--                  </div>-->
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>

  </div>
</template>

<script>
import Share from "@/common/share";
import checkLogin from "@/common/check-login";
export default {
  components: {},
  data() {
    return {
      id: 0,
      isShow: false,
      pageData: {},
      shopList: [],
    };
  },
  computed: {
    bannerList() {
      let { media, cover_picture } = this.pageData;
      return media && media.length > 0 ? media : [{ url: cover_picture }];
    },
  },
  onLoad(options) {
    if(options.id){
      this.getMerchantDetail(options.id);
    }
    this.id = options.id;
    Share.getShareCode();
    this.getProductList(options.id)
  },
  onShareAppMessage(res) {
    let { id, name, cover_picture } = this.pageData;
    return Share.getShareId({
      id,
      from: res.from,
      shareLink: `pages/shanghu/details`,
      shareTitle: name,
      shareImgUrl: cover_picture,
    });
  },
  methods: {
    openLocation(item) {
      let { name, address, lng, lat } = this.pageData;
      wx.openLocation({
        name,
        address,
        latitude: Number(lat),
        longitude: Number(lng),
        fail: (err) => {
          console.log(err);
        },
      });
    },
    makePhoneCall() {
      wx.makePhoneCall({
        phoneNumber: this.pageData.tel,
      });
    },
    getMerchantDetail(id) {
      this.$api.getMerchantDetail({ id }).then((res) => {
        if (res.code == 200) {
          this.pageData = res.data;
          this.isShow = true;
        }
      });
    },
    getProductList(merchId) {
      this.$api
          .productList({
            merchId: merchId,
            isRandom: 1,
            pageSize: 4,
            page: 1,
          })
          .then((res) => {
            if (res.code == 200) {
              this.shopList = this.shopList.concat(res.data.data);
            }
          });
    },
    toLink(path) {
      checkLogin(path);
    },
  },
};
</script>

<style lang="scss">
.details {
  overflow: hidden;
  color: #333333;
  font-size: 28rpx;
  background: #f4f4f4;
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .divider {
    height: 1rpx;
    background: #e7e7e7;
    margin-top: 20rpx;
  }
  .top-box {
    padding: 18rpx 30rpx 20rpx;
    overflow: hidden;
    background: #fff;
    .pic {
      height: 320rpx;
      overflow: hidden;
      border-radius: 8rpx;
      transform: translateY(0);
    }
    .name {
      margin: 20rpx 0;
      font-size: 42rpx;
      font-weight: bold;
      line-height: 60rpx;
    }
    .intro {
      font-size: 26rpx;
      line-height: 38rpx;
    }
    .amount-box {
      color: #ee4130;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      .tag {
        height: 32rpx;
        line-height: 32rpx;
        border-radius: 18rpx 18rpx 18rpx 0;
        border: 1px solid #d0d0d0;
        color: #666666;
        font-size: 22rpx;
        padding: 0 10rpx;
        margin-left: 12rpx;
      }
      .icon {
        background: rgba(238, 65, 48, 0.13);
        width: 36rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        margin-right: 10rpx;
        // background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
      }
    }
    .explain {
      margin-top: 10rpx;
      display: inline-block;
      background: rgba(23, 114, 255, 0.09);
      border-radius: 4rpx;
      align-items: center;
      height: 36rpx;
      padding: 0 12rpx;
      line-height: 36rpx;
      color: #1772ff;
      font-size: 24rpx;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 660rpx;
      .text {
        vertical-align: middle;
        display: inline-block;
      }
      .icon {
        display: inline-block;
        vertical-align: middle;
        width: 28rpx;
        height: 28rpx;
        background: url(https://media.wxcwy.com/mini/images/zjicon@2x.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 8rpx;
      }
    }
    .tips {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      font-size: 26rpx;
      .left-pic {
        flex: 0 0 40rpx;
        height: 40rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .user-name {
        color: #1772ff;
      }
      .number {
        color: #ff7900;
      }
    }
  }
  .info-box {
    margin-top: 20rpx;
    background: #fff;
    padding: 0 30rpx;
    overflow: hidden;
    .item {
      padding: 30rpx 0;
      border-bottom: 1px solid #e7e7e7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        flex: 0 0 32rpx;
        height: 32rpx;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .left {
        flex: 1;
        display: flex;
        .icon {
          margin: 6rpx 15rpx 0 0;
        }
        .txt {
          flex: 1;
          .tips {
            font-size: 32rpx;
            font-weight: bold;
            margin-right: 10rpx;
          }
        }
      }
      .right-icon {
        flex: 0 0 25rpx;
        height: 30rpx;
        background: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png) no-repeat center center;
        background-size: 100% 100%;
      }
      .right {
        margin-left: 20rpx;
        flex: 0 0 170rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #e7e7e7;
        .icon {
          margin-right: 10rpx;
        }
      }
      &.time {
        .left {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/yingye_icon@2x.png);
          }
        }
      }
      &.address {
        .left {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
          }
        }
        .right {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/dwbl_icon@2x.png);
          }
        }
      }
      &.tel {
        .left {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/yingye_tel-icon@2x.png);
          }
        }
        .right {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/yingye_tel-icon@2x.png);
          }
        }
      }
      &.notice {
        .left {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/gonggao_icon@2x.png);
          }
        }
        .txt {
          flex: 0 0 635rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .notice-txt {
          margin-left: 10rpx;
        }
      }
      &.recommend {
        .left {
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/zjicon@2x.png);
          }
        }
        .right {
          border-left: 0px solid #e7e7e7;
          .icon {
            background-image: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png);
          }
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .details-txt {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx;
    overflow: hidden;
    font-size: 26rpx;
    line-height: 40rpx;
  }
}


.list-box {
  margin: 14rpx 0;
  overflow: hidden;
  .item2 {
    display: flex;
    margin-top: 20rpx;
    .pic-box {
      margin-right: 20rpx;
      .img{
        width: 240rpx;
        height: 240rpx;
        border-radius: 8rpx;
      }
      position: relative;
      .inventory {
        width: 100%;
        color: #fff;
        font-size: 24rpx;
        line-height: 44rpx;
        background: #9b9b9b;
        position: absolute;
        left: 0;
        bottom: 8rpx;
        text-align: center;
        border-bottom-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
        .triangle-box {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 36rpx 0 0 20rpx;
          border-color: transparent transparent transparent #9b9b9b;
          position: absolute;
          top: 0;
          right: -20rpx;
        }
      }
      .tips {
        position: absolute;
        top: 20rpx;
        left: 0;
        height: 34rpx;
        line-height: 34rpx;
        background: #ee4130;
        color: #fff;
        border-radius: 4rpx;
        padding: 0 20rpx;
        font-size: 24rpx;
      }
    }
    .title {
      line-height: 40rpx;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 28rpx;
    }
    .tag{
      position: absolute;
      bottom:70rpx;
      .spike {
        width: fit-content;
        color: #ff7900;
        border: 1px solid #ff7900;
        border-radius: 6rpx;
        padding: 0 8rpx;
        margin-right: 20rpx;
        box-sizing: border-box;
      }
    }
    .price-info {
      height: 45rpx;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: 12rpx;
      width: 100%;
      .left {
        display: flex;
        align-items: center;
        color: #ff7900;
        .number {
          font-size: 40rpx;
        }
        .old {
          color: #9f9f9f;
          text-decoration: line-through;
          margin-left: 11rpx;
        }
      }
      .right {
        color: #9f9f9f;
        font-size: 24rpx;
        line-height: 48rpx;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
